<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡效果</title>
    <style>
        .web-box {
            width: 300px;
            border: 1px solid #aaa;
        }
        .menu-box {
            font-size: 0;
            display: flex;
            justify-content: space-evenly;
        }
        .menu-box button{
            width: 33%;
            line-height: 30px;
        }
        .active-menu {
            background-color: rgb(6, 6, 6);
            color: #fff;
            border: 1px solid #aaa;
        }
        .content-box {
            width: 100%;
            height: 200px;
            padding: 10px;
        }
        .content {
            display: none;
        }
        .show-content {
            display: block;
        }
    </style>
</head>
<body>
    <div class="web-box">
        <div class="menu-box">
            <button class="active-menu">html</button>
            <button>css</button>
            <button>js</button>
        </div>
        <div class="content-box">
            <div class="content show-content">
                html是超文本标记语言
            </div>
            <div class="content">
                css是层叠样式表
            </div>
            <div class="content">
                javascript是网页脚本语言
            </div>
        </div>
    </div>
    <script>
        let btns = document.querySelectorAll(".menu-box button")
        let contents = document.querySelectorAll(".content")
        btns.forEach((btn,index) => {
            btn.addEventListener("click", function(){
                document.querySelectorAll(".active-menu").classList.remove("active-menu")
                document.querySelectorAll(".show-content").classList.remove("show-content")

                // 把当前按钮对应的内容显示出来
                contents[index].classList.add("show-content")
                this.classList.add("active-menu")
            })
        })
    </script>
</body>
</html>